<template>
  <div>
    <a-input
      class="input"
      v-model="curVal"
      :allowClear="allowClear"
      :placeholder="placeholder"
      @change="getSearchTipList"
      @keydown.enter.native="handleEnterKeyDown"
      @blur="keywordBlurFun"
    ></a-input>

    <div class="search-tip-box" v-if="showSearchTip">
      <div class="search-tip-mask"></div>
      <div class="search-tip-list" :style="tipStyle">
        <div class="list" @click="selectSearchTipFun(item)" v-for="(item, inx) in tipList" :key="inx" :title="item">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: { default: '', type: String },
    list: { default: [], type: Array }, //字符串list
    placeholder: { default: '', type: String }, //字符串list
    allowClear: false,
    tipStyle:{default:'',type: String},
  },
  data() {
    return {
      curVal: null,
      tipList: [],
    }
  },
  computed: {
    showSearchTip() {
      return this.tipList.length && this.curVal
    },
  },
  watch: {
    value(e) {
      this.curVal = e
    },
    list(e) {
      let l = e
      if (e.length) {
        //去重
        l = Array.from(new Set(e))
      }
      this.tipList = l
    },
  },
  methods: {
    getSearchTipList() {
      this.$emit('change', this.curVal)
    },
    keywordBlurFun() {
      setTimeout(() => {
        this.tipList = []
        this.$emit('keywordBlurFun')
      }, 200)
    },
    handleEnterKeyDown() {
      this.$emit('enterKeyDown')
    },
    selectSearchTipFun(text) {
      this.curVal = text
      this.$emit('select', this.curVal)
      this.tipList = []
    },
  },
}
</script>

<style lang="less" scoped>
.search-tip-box {
  position: relative;
}
.search-tip-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none; /* 设置为 none，使其不响应鼠标事件 */
}
.search-tip-list {
  pointer-events: all; /* 设置为 none，使其不响应鼠标事件 */
  position: absolute;
  z-index: 100;
  background: #fff;
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  right: 9px;
  top: 10px;
  display: flex;
  overflow: hidden;
  flex-direction: column;

  color: #666;
  font-size: 16px;

  .list {
    &:hover {
      background-color: #ecf5ff;
    }
    padding: 2px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
}
</style>
